<template>
  <div class="enhanced-el-table">
    <el-table :data="tableData" v-bind="tableProps" @select="emit('select', $event)"
      @select-all="emit('select-all', $event)">
      <!-- 特殊类型列处理 -->
      <template v-for="col in processedColumns" :key="col.prop || col.type">
        <!-- 索引/选择/扩展列 -->
        <el-table-column v-if="col.type" :type="col.type" :index="col.type === 'index' ? indexMethod : undefined"
          v-bind="col">
          <!-- 扩展列自定义内容 -->
          <template v-if="col.type === 'expand'" #default="{ row, $index }">
            <slot v-if="$slots[col.slotName || 'expand']" :name="col.slotName || 'expand'" :row="row" :index="$index" />
            <component v-else-if="col.render" :is="col.render({ row, index: $index })" />
            <span v-else>{{ col.content?.(row) || '>' }}</span>
          </template>
        </el-table-column>

        <!-- 普通数据列 -->
        <el-table-column v-else v-bind="col" :prop="col.prop" :label="col.label" :width="col.width" :align="col.align">
          <template #default="{ row, $index }">
            <!-- 渲染优先级：1.render函数 2.具名插槽 3.格式化函数 4.原始数据 -->
            <template v-if="col.render">
              <component :is="col.render({ row, index: $index })" />
            </template>
            <slot v-else-if="col.slotName && $slots[col.slotName]" :name="col.slotName" :row="row" :index="$index" />
            <span v-else-if="col.formatter">
              {{ col.formatter(row, $index) }}
            </span>
            <span v-else>
              {{ col.prop ? row[col.prop] : '' }}
            </span>
          </template>
        </el-table-column>
      </template>

      <!-- 操作列 -->
      <el-table-column v-if="actions.length" label="操作" :width="actionColumnWidth" fixed="right">
        <template #default="{ row, $index }">
          <slot name="actions" :row="row" :index="$index">
            <div class="action-buttons">
              <el-button v-for="(action, i) in actions" :key="i" v-bind="action.buttonProps"
                @click="action.handler?.(row, $index)">
                {{ action.label }}
              </el-button>
            </div>
          </slot>
        </template>
      </el-table-column>

      <!-- 默认插槽用于添加额外列 -->
      <slot />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { type Component } from 'vue'
interface ColumnConfig {
  type?: 'index' | 'selection' | 'expand'
  prop?: string
  label?: string
  width?: string | number
  align?: 'left' | 'center' | 'right'
  slotName?: string
  render?: (ctx: { row: any; index: number }) => Component
  formatter?: (row: any, index: number) => string
  content?: (row: any) => string
}

interface ActionConfig {
  label: string
  handler: (row: any, index: number) => void
  buttonProps?: Record<string, any>
}

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array as () => ColumnConfig[],
    default: () => []
  },
  actions: {
    type: Array as () => ActionConfig[],
    default: () => []
  },
  actionColumnWidth: {
    type: [Number, String],
    default: 180
  },
  indexMethod: {
    type: Function,
    default: (index: number) => index + 1
  },
  tableProps: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['select', 'select-all'])

// 处理带默认值的列配置
const processedColumns = computed(() => {
  return props.columns.map(col => ({
    align: 'left',
    ...col,
    label: col.label || col.prop
  }))
})

// 暴露表格实例方法
defineExpose({
  clearSelection: () => {
    // 调用 el-table 的清除选择方法
  }
})
</script>

<style scoped>
.enhanced-el-table {
  --action-gap: 8px;
  margin: 16px 0;
}

.action-buttons {
  display: flex;
  gap: var(--action-gap);
  flex-wrap: wrap;
}

.el-table-column--selection :deep(.el-checkbox) {
  margin-right: 12px;
}
</style>
